<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>

</body>
<script>
  let myChart = echarts.init(document.querySelector("div"))
  let option = {
    legend: {},
    radar: {
      indicator: [
        { name: "js基础", min: 0, max: 100 },
        { name: "css基础", min: 00, max: 100 },
        { name: "vue基础", min: 00, max: 100 },
        { name: "小程序基础", min: 0, max: 100 },
        { name: "html", min: 0, max: 100 },
        { name: "英文水平", min: 0, max: 100 },
      ],
      axisName: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ff0000"
        }
      },
      axisLabel: {
        fontSize: 60
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(0,0,0,.4)', 'rgba(211,112,116,.4)', 'rgba(233,112,119,.4)', 'rgba(255,100,99,.4)'],

        },

      },

    },

    series: [
      {
        type: "radar",
        data: [
          { name: "张三", value: [10, 20, 40, 50, 60, 70] },
          { name: "李四", value: [60, 90, 47, 59, 69, 90] },
          { name: "王五", value: [70, 50, 40, 90, 70, 100] },
          { name: "赵六", value: [90, 70, 90, 20, 80, 69] },
        ],
        left: "10%",
        itemStyle: {
          borderColor: "#ffff00",
          borderWidth: 3
        },
        label: {
          show: true,
          position: "inside",
        },
        emphasis: {
          label: {
            fontSize: 50
          }
        }
      }
    ]
  }
  myChart.setOption(option)
</script>

</html>